@keyframes loading {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.img {
  flex: 0 0 auto !important;
  height: auto !important;
  width: auto !important;
  &[src$='#defaultImg'],
  &[src$='#errImg'] {
    height: 50px !important;
    user-select: none !important;
  }
}

.placeholder {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --loading-delay: 0.5s;
  > img {
    flex: 0 0 auto;
    max-height: 100%;
    max-width: 100%;
    height: 50px;
    user-select: none;
    opacity: 0;
    animation: loading 0.8s var(--loading-delay) infinite alternate;
  }
}

.previewPlaceholderImg {
  height: 100px;
  user-select: none;
  &.isPreviewLoading {
    opacity: 0;
    animation: loading 0.8s 0.5s infinite alternate;
  }
}
